<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">动动我试试</button>

    <script>

        // 函数内的this指向[函数的调用者/主语]
        function fn(){
            console.log("this in fn",this);
        }

        /* 情形一：没有显式的主语时 调用事实上由window调用 */
        // fn()
        // window.fn()

        /* 情形二：有显式的调用者 this则直接指向调用的主语 */
        var obj = {name:"欧毕节"}
        obj.handler = fn
        obj.handler()

        /* 情形三：DOM元素的事件处理函数中的this即【该DOM元素本身】 */
        console.log(btn);
        // btn.onclick = function (){
        //     console.log("this in fn",this);
        // }
        // 用户点击btn时系统会：btn.onclick()
        btn.onclick = fn
    </script>
</body>

</html>